<template>
	<view class="container">
		<!-- 外层循环遍历content中的每个数组 -->
		<view v-for="(section, sectionIndex) in content" :key="sectionIndex">
			<!-- 内层循环遍历每个数组中的元素 -->
			<view v-for="(item, index) in section" :key="index">
				<image v-if="item.tag === 'img'" :src="item.src" mode="widthFix" class="image"></image>
				<h2 v-else-if="item.tag === 'h2'" class="h2">{{ item.text }}</h2>
				<p v-else-if="item.tag === 'p'" class="p">{{ item.text }}</p>
				<a v-else-if="item.tag === 'a'" class="a" @click.prevent="handleClick(item.href)">{{ item.text }}</a>
				<ul v-else-if="item.tag === 'ul'">
					<li v-for="(liItem, liIndex) in item.items" :key="liIndex" class="li">{{ liItem.text }}</li>
				</ul>
			</view>
		</view>

		<!-- 返回按钮 -->
		<view class="back-button-container">
			<button class="back-button" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
	export default {
		data() {
			return {
				content: [],
				link: ''
			};
		},
		onLoad() {
			this.link = uni.getStorageSync('selectedLink'); // 从本地存储中读取link
			if (!this.link) {
				console.error('No link provided');
				return;
			}
			this.fetchContent(this.link);
		},
		methods: {
			fetchContent(url) {
				if (!url) {
					console.error('No URL provided');
					return;
				}

				uni.request({
					url: `${config.BASE_URL}/fetch-content`,
					method: 'POST',
					data: {
						url: url
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							this.content = res.data;
						} else {
							console.error('Failed to fetch content:', res);
						}
					},
					fail: (err) => {
						console.error('Request failed:', err);
					}
				});
			},
			handleClick(href) {
				// Handle the click event for anchor tags here
				console.log('Clicked on a link:', href);
				// You can add navigation logic here or open the link in some way.
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #242444;
		color: white;
		padding: 20px;
	}

	.h2 {
		font-size: 24px;
		margin-bottom: 10px;
		color: #f1b041;
		margin-top: 15px;

	}

	.p {
		font-size: 16px;
		margin-bottom: 10px;
		text-indent: 2em;
		line-height: 30px;
	}

	.a {
		font-size: 16px;
		color: white;
		text-decoration: underline;
		margin-bottom: 10px;
		line-height: 30px;
	}

	.image {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}

	ul {
		list-style-type: disc;
		padding-left: 20px;
		margin-bottom: 10px;
	}

	.li {
		font-size: 16px;
		margin-bottom: 5px;
	}
	
	/* 新增返回按钮样式 */
	.back-button-container {
	  margin-top: 20px;
	  text-align: center;
	}
	
	.back-button {
	  background-color: #2b2b47;
	  color: white;
	  border: none;
	  padding: 10px 20px;
	  font-size: 16px;
	  cursor: pointer;
	}
	
	.back-button:hover {
	  background-color: #3e3e66; /* 当鼠标悬停时稍微加深背景色 */
	}
</style>